<template>
	<div class="spread con sale_index">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/part' }">Homepage</el-breadcrumb-item>
			<el-breadcrumb-item>PurchOrder</el-breadcrumb-item>
		</el-breadcrumb>
		<div style="margin-left: 10px;margin-bottom:10px;">
			<el-input v-model="PartNo" placeholder="Search PartNo" style="width:20%" clearable></el-input>
			<el-button type="info" icon="el-icon-search" @click="handerSearch">Search</el-button>
			
		</div>

		<el-table
			v-loading="loading"
			element-loading-text="拼命加载中"
			:data="tableData"
			style="width: 100%"
			:height="tableHeight"
			border
			fit
			highlight-current-row
			@current-change="shandleCurrentChange">
			
			<el-table-column label="Status" width="100">
				<template slot-scope="scope">
					<span>{{ scope.row.ItemStatusID }}</span>
				</template>
			</el-table-column>
			<el-table-column label="VenderName" width="160">
				<template slot-scope="scope">
					<span>{{ scope.row.VenderName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="CreatedDate" width="160" >
				<template slot-scope="scope">
					<span>{{ scope.row.CreatedDate }}</span>
				</template>
			</el-table-column>
			
			<el-table-column label="ShipDate" width="100">
				<template slot-scope="scope">
					<span>{{ scope.row.ShipDate }}</span>
				</template>
			</el-table-column>
			
			<el-table-column label="PurchOrderNo" width="150">
				<template slot-scope="scope">
					<span>{{ scope.row.PurchOrderNo }}</span>
				</template>
			</el-table-column>

			<el-table-column label="PurchRepName" width="150">
				<template slot-scope="scope">
					<span>{{ scope.row.PurchRepName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="ItemPurchRepName" width="170">
				<template slot-scope="scope">
					<span>{{ scope.row.ItemPurchRepName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="BrandAlias" width="120">
				<template slot-scope="scope">
					<span>{{ scope.row.BrandAlias }}</span>
				</template>
			</el-table-column>
			<el-table-column label="PartNo" width="180">
				<template slot-scope="scope">
					<span>{{ scope.row.PartNo }}</span>
				</template>
			</el-table-column>
			<el-table-column label="OrderQty" width="120">
				<template slot-scope="scope">
					<span>{{ scope.row.OrderQty }}</span>
				</template>
			</el-table-column>
			
			
			<!--
			<el-table-column label="RecevicedQty" width="60">
				<template slot-scope="scope">
					<span>{{ scope.row.RecevicedQty }}</span>
				</template>
			</el-table-column>
			<el-table-column label="ShowBuyPrice" width="80">
				<template slot-scope="scope">
					<span>{{ scope.row.ShowBuyPrice }}</span>
				</template>
			</el-table-column>
			-->
			
			<el-table-column label="Amount" width="120">
				<template slot-scope="scope">
					<span>{{ scope.row.Amount }}</span>
				</template>
			</el-table-column>
			<el-table-column label="ItemDesc" width="90">
				<template slot-scope="scope">
					<span>{{ scope.row.ItemDesc }}</span>
				</template>
			</el-table-column>
			
			<el-table-column label="SiteCode" width="90">
				<template slot-scope="scope">
					<span>{{ scope.row.SiteCode }}</span>
				</template>
			</el-table-column>

		</el-table>

		<div class="block el-pagination" style="margin-top: 0px; overflow: hidden;">
			<el-pagination
				class="pages"
				background
				layout="total,prev, pager, next"
				:total="page.total"
				:page-size="page.size"
				@current-change="handleCurrentChange"
				:current-page.sync="page.currentPage"
			></el-pagination>
		</div>
	</div>
</template>

<script type="text/javascript">
export default {
	data() {
		var sdDate = [];
		return {
			loading: false,
			tableData: [],
			tableHeight: window.innerHeight - 403 < 560 ? 700 : window.innerHeight - 403,
			token: '',
			keyword: '',
			PartNo:'',
			rantime: [],
			currentRow: [],
			arr: [],
			listQuery: { sortby: '', order: 'desc' },
			fileDwonload: false,
			url: '',
			btt: [],
			page: {
				total: 0,
				size: 0,
				currentPage: 1,
				num: 1
			},
			sort: 1
			
		};
	},

	created() {
		//this.token = window.axios.defaults.headers.common['X-CSRF-TOKEN'];
		this.getPartList();
	},
	mounted() {
		
		// 动态设置表格高度适应窗口
		window.onresize = () => {
			let a = window.innerHeight;
			that.tableHeight = a - 403;
		};
	},
	methods: {
		getPartList(){
			this.loading = true;
			axios
				.get('/api/customer/purchordersearch?keyword=' +this.PartNo +'&page=' +this.page.num).then(result => {
					if (result.data.code == 200) {
						this.tableData = result.data.result.data;
						this.page.total = result.data.result.total;
						this.page.size = result.data.result.per_page;
						this.page.per_page = result.data.result.last_page;
						this.loading = false;
					} else {
						this.$notify.error({
							title: '错误',
							message: result.data.message
						});
					}
				})
				.catch(error => {
					this.$notify.error({
						title: '错误',
						message: result.data.message
					});
				});
		},
		
		handerSearch() {
			this.page.num = 1;
			this.getPartList();
		},

		handleCurrentChange(val) {
			this.page.num = val;
			this.getPartList()
		},
		 isTimeString(time){
		    	if(time=='' || time== null){
		    	 return '';
		    	}else{
		    		return time.date.substring(0,10);
		    	}
		    
		    },
	
		shandleCurrentChange(data) {
			this.currentRow = data;
		},
		addTime(m) {
			return m < 10 ? '0' + m : m;
		},

		getTime() {
			var date = new Date();
			let y = date.getFullYear();
			let m = date.getMonth() + 1;
			let d = date.getDate();
			// console.log(d)
			let time = y + '-' + m + '-' + d;
			let d1 = '01';
			let time1 = y + '-' + m + '-' + d1;
			this.rantime[0] = time1;
			this.rantime[1] = time;
		},

		timeFormat(shijianchuo) {
			//shijianchuo是整数，否则要parseInt转换
			var time1 = new Date(shijianchuo);
			var y = time1.getFullYear();
			var m = time1.getMonth() + 1;
			var d = time1.getDate();
			var h = time1.getHours();
			var mm = time1.getMinutes();
			var s = time1.getSeconds();
			return y + '-' + this.addTime(m) + '-' + this.addTime(d) + ' ' + this.addTime(h) + ':' + this.addTime(mm) + ':' + this.addTime(s);
		}
	}
};
</script>

<style lang="scss">
.sale_index {
	.sort.el-select .el-input {
		width: 140px;
	}
	.el-button-group {
		position: relative;
		top: -1px;
	}
}

.el-table .warning-row {
	background: oldlace;
}

.input-with-select .el-input-group__prepend {
	background-color: #fff;
}
.el-table .success-row {
	background: #f0f9eb;
}
.con {
	.el-breadcrumb {
		height: 40px;
	}
	.juli {
		margin-left: 10px;
	}
}
.el-pagination__total {
	float: left;
	margin-top: 2px;
}
.pages {
	float: right;
}
</style>
